<template>
  <div id="box">
    <div class="box-top">
      <textarea
        name=""
        ref="comment"
        v-model="currentValue"
        cols="80"
        rows="10"
        placeholder="请输入您的评论"
      ></textarea>
      <button id="btn" @click="addComment">add commnent</button>
    </div>
    <ul id="comment-content">
      <li v-for="(item, index0) in replayList" :key="item.id">
        <div v-for="(comment, index) in item.comment">
          <span
            class="iconfont"
            :class="[
              !isExpand[index0][index] ? 'icon-xiangxia1' : 'icon-xiangshang1',
            ]"
            @click="expand(index0, index)"
          ></span
          >{{ item.name }} {{ item.commentTime }}
          <span class="delete" @click="deleteComment(item.id, index)">[-]</span>
          <div v-show="isExpand[index0][index]">
            <div class="comtent">{{ comment.content }}</div>
            <button @click="addReplay(index0, index)">replay</button>
            <div
              v-if="
                isShowReplay &&
                isShowReplay.length &&
                isShowReplay[index0] &&
                isShowReplay[index0].length &&
                isShowReplay[index0][index]
              "
            >
              <textarea
                name=""
                ref="replay"
                v-model="inputValue"
                cols="80"
                rows="10"
                placeholder="请输入您的评论"
              ></textarea>
              <button id="btn" @click="replayComment(index0, index)">
                add replay
              </button>
            </div>
            <ul class="replay" v-if="comment.replays && comment.replays.length">
              <li v-for="(item1, index1) in comment.replays" :key="item1.id">
                {{ item1.name }} {{ item1.commentTime }}
                <span
                  class="delete"
                  @click="deleteComment1(item.id, index, index1)"
                  >[-]</span
                >
                <div class="comtent">{{ item1.content }}</div>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "App",
  components: {},
  data() {
    return {
      isShowReplay: [],
      inputValue: "",
      isExpand: [],
      currentValue: "", // 添加评论
    };
  },
  computed: {
    ...mapState(["replayList"]),
  },
  created() {
    for (let i = 0; i < this.replayList.length; i++) {
      this.isExpand[i] = [];
      // console.log(this.replayList.length, this.replayList[i].comment.length);
      for (let j = 0; j < this.replayList[i].comment.length; j++) {
        this.isExpand[i][j] = true;
      }
    }
    // console.log(this.isExpand);
  },
  methods: {
    addComment() {
      // debugger
      console.log(this.$refs.comment.value);
      var commentValue = this.currentValue;
      if (commentValue.length === 0) {
        alert("您输入的内容为空");
        return;
      }
      this.$store.commit("inputChange", commentValue);
    },
    deleteComment(id, index) {
      // console.log(id,index);
      this.$store.commit("deleteComment", { id, index });
    },
    deleteComment1(id, index, index1) {
      // console.log(id, index);
      this.$store.commit("deleteComment1", { id, index, index1 });
    },
    // 回复评论
    addReplay(index0, index) {
      // console.log(index0,index);
      // this.isShowReplay[index] = true;
      // this.isShowReplay[index0] = []
      this.$set(this.isShowReplay, index0, []);
      this.$set(this.isShowReplay[index0], index, true);
      // console.log(this.isShowReplay)
    },
    replayComment(index0, index) {
      // debugger;
      console.log(this.inputValue);
      var commentValue = this.inputValue;
      console.log(commentValue);
      if (commentValue.length === 0) {
        alert("您输入的内容为空");
        return;
      }
      // // this.$set(this.isShowReplay, index0, [])
      // // console.log(this.isShowReplay[index0])
      this.$set(this.isShowReplay[index0], index, false);
      // console.log(commentValue);
      this.$store.commit("inputChange1", { commentValue, index, index0 });
      this.inputValue = "";
    },
    // 折叠与展开评论列表
    expand(index0, index) {
      console.log(this.isExpand[index0]);
      // this.$set(this.isExpand[index0], index, !this.isExpand[index0][index]);
      // this.isExpand[index0].splice(index,1,!this.isExpand[index0][index])
      // this.isExpand[index0][index] = !this.isExpand[index0][index];
      let temp = this.isExpand[index0];
      temp[index] = !this.isExpand[index0][index];
      this.$set(this.isExpand, index0, temp);

      // console.log(this.isExpand[index0][index]);
    },
  },
};
</script>

<style>
ul {
  list-style: none;
}
.delete {
  cursor: pointer;
}
.iconfont {
  font-size: 18px;
  margin-right: 10px;
}
#box {
  width: 1000px;
  border: 1px solid #ccc;
  margin: 100px auto;
  padding: 20px;
}
#comment {
  width: 80%;
  padding: 10px 10px;
  font-size: 20px;
  outline: none;
}
#btn {
  display: block;
  margin-top: 15px;
}
.box-top {
  margin-bottom: 20px;
}
#comment-content li {
  border-bottom: 1px dashed #ccc;
  width: 800px;
  color: #8f8f8f;
  line-height: 45px;
}
#comment-content li .comtent {
  color: #333;
}
#comment-content li a {
  float: right;
}
</style>
